<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>族谱</title>
<meta name="keywords" content="css,css3" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<script src="js/jquery.min.js" type="text/javascript"></script>
</head>

<body>
<input type="text" id="myId" placeholder="请输入正确名称"/> <button class="tijiao" onclick="showTree()">提交</button>
<div id="main">

    <div class="tree">
	<ul>
		<li>
			<a href="#" contenteditable="true" class="thistop">填写名称</a>
		</li>
	</ul>
</div>
</div>
<div class="wrap-ms-right" style="">
	<li class="ms-item addqizi" data-item="0"><i class="fa fa-plus"></i>&nbsp; 添加妻子</li>
	<li class="ms-item addup" style='display: none' data-item="1"><i class="fa fa-plus"></i>&nbsp; 向上添加</li>
	<li class="ms-item adddown" data-item="1"><i class="fa fa-plus"></i>&nbsp; 向下添加</li>
	<li class="ms-item modify" data-item="2"><i class="fa fa-files-o"></i>&nbsp; 修改名称</li>
	<li class="ms-item remove" data-item="3"><i class="fa fa-trash"></i>&nbsp; 删除当前</li>
</div>
<div class="nameboxbg">
	
	<div class="namebox">
		<div class="title">请输入名称</div>
		<div class="content">
			<form>
				<input type="text" class="name" placeholder="请输入正确名称" />
				<input type="text" class="name" placeholder="请输入正确名称" />
			</form>
		</div>
		<div class="submit">
			<button class="tijiao">提交</button>
			<button class="quxiao">取消</button>
		</div>
	</div>
</div>
<script type="text/javascript">
/*$(function(){

	var json = {
	"code": 200,
	"message": "成功",
	"data": {
		"id": 12,
		"telephone": "110",
		"name": "曾国潢",
		"sex": "男",
		"children": [{
			"id": 14,
			"telephone": "110",
			"name": "曾纪梁",
			"sex": "男",
			"children": [{
				"id": 16,
				"telephone": "110",
				"name": "曾广祚",
				"sex": "男",
				"children": [{
					"id": 25,
					"telephone": "110",
					"name": "曾昭抡",
					"sex": "女",
					"children": []
				}, {
					"id": 26,
					"telephone": "110",
					"name": "曾昭楣",
					"sex": "女",
					"children": []
				}, {
					"id": 20,
					"telephone": "110",
					"name": "曾昭承",
					"sex": "男",
					"children": []
				}]
			}]
		}, {
			"id": 13,
			"telephone": "110",
			"name": "曾纪湘",
			"sex": "男",
			"coupleName": "李氏",
			"coupleId": 23,
			"children": [{
				"id": 15,
				"telephone": "110",
				"name": "曾广荣",
				"sex": "男",
				"children": [{
					"id": 18,
					"telephone": "110",
					"name": "曾昭佑",
					"sex": "男",
					"children": [{
						"id": 27,
						"telephone": "110",
						"name": "曾宪云",
						"sex": "女",
						"children": []
					}]
				}, {
					"id": 17,
					"telephone": "110",
					"name": "曾昭文",
					"sex": "男",
					"children": []
				}, {
					"id": 19,
					"telephone": "110",
					"name": "曾昭辉",
					"sex": "男",
					"children": []
				}]
			}]
		}]
	}
};
*/
function getArray(arr)
    {
    	var data = arr.children;
    	var parid = arr.id;
        for (var i in data) {
        	data[i].parid = arr.id;
        	var str = '<li><a href="#" data-id="'+data[i].id+'" class="children'+data[i].id+'" contenteditable="true">'+data[i].name+'</a></li>';
            if($('.children'+parid).siblings('ul').length > 0){
				$('.children'+parid).siblings('ul').append(str);
			}else{
				$('.children'+parid).after('<ul>'+str+'</ul>');
			}
			if(data[i].coupleName && data[i].coupleName != ''){
        		$('.children'+data[i].id).append('&nbsp; &nbsp; <a href="#" contenteditable="true">'+data[i].coupleName+'</a>');
        	}
            if (Object.keys(data[i].children).length > 0) {
            	getArray(data[i]);
            }
            console.log(str)
        }
    }
//var parentss = '<ul><li><a href="#" data-id="'+json.data.id+'" contenteditable="true" class="children'+json.data.id+' thistop">'+json.data.name+'</a></li></ul>';
//alter(parentss);
//$('.tree').empty();
//$('.tree').append(parentss);

//getArray(json.data);

function showTree(){

	var myid = $('#myId').val();
	
	$.ajax({
  		url: "http://www.byapps.cn/genealogy/api/genealogy",
		method: 'post',
  		dataType: 'json',
		//contentType:'application/json',  
         xhrFields: {  
            withCredentials: true  
        }, 
		data: {
			'token': myid
		},
  		timeout: 1000,
  		success: function (json) {
		
  			//data = json.data;
			
    		var parentss = '<ul><li><a href="#" data-id="'+json.data.id+'" contenteditable="true" class="children'+json.data.id+' thistop">'+json.data.name+'</a></li></ul>';
		    $('.tree').empty();
			$('.tree').append(parentss);
			getArray(json.data);
 		 },
  		fail: function (err) {
   			console.log(err)
  		}
	})
}
	
	function ONanimation(){
		$('.name').val('');
		$('.nameboxbg').removeClass('boxbganimation1').addClass('boxbganimation');
		$('.namebox').removeClass('boxanimation1').addClass('boxanimation');
	}
	function OFFanimation(){
		$('.nameboxbg').removeClass('boxbganimation').addClass('boxbganimation1');
		$('.namebox').removeClass('boxanimation').addClass('boxanimation1');
	}
	$('.quxiao').click(function(){
		OFFanimation();
		$('.data-this').removeClass('data-this');
	})
	$("body").on('li a').unbind("mousedown").bind("contextmenu", function (e) {
	    e.preventDefault();
	    return false;
	});
	$("body").on("mousedown",'li a', function (event) {
		var html = $('.tree').html();
		$('.data-this').removeClass('data-this');
		$(this).addClass('data-this');
		var id = $(this).attr('data-id');
		var addtype;
	    if (event.which == 3) {
	        $('.wrap-ms-right').css({
				"display": "block",
				"top": event.pageY + "px",
				"left": event.pageX + "px"
			});
			if($('.data-this').hasClass('thistop')){
				$('.addup').show();
			}else{
				$('.addup').hide();
			}
			$('.addqizi').click(function(){
				ONanimation();
				addtype = 0;
			})
			$('.adddown').click(function(){
				ONanimation();
				addtype = 1;
			})
			$('.addup').click(function(){
				ONanimation();
				addtype = 2;
			})
			$('.modify').click(function(){
				ONanimation();
				addtype = 3;
			})
			$('.remove').click(function(){
				addtype = 4;
			})
			$('.tijiao').click(function(){
				/*
					addtype 添加类型：0：妻子，1:向下，2：向上，3：修改，4：删除
				 */
				var name = $('.name').val();
				if(name == ''){
					alert('请输入名称');
					return false;
				}
				$.ajax({
					url: 'www.baidu.com',
			  		type: 'post',
			  		dataType: 'json',
			  		data:{id:id,name:name,addtype:addtype},
			  		timeout: 1000,
			  		success: function (json) {
			  			if(addtype == 0){
			  				$('.data-this').append('&nbsp; &nbsp; <a data-id="'+id+'" href="#">'+name+'</a>');
			  			}
			  			if(addtype == 1){
						  	if($(".data-this").siblings('ul').length > 0){
								$('.data-this').siblings('ul').append('<li><a data-id="'+id+'" href="#">'+name+'</a></li>');
							}else{
								$('.data-this').after('<ul><li><a data-id="'+id+'" href="#">'+name+'</a></li></ul>');
							}
			  			}
			  			if(addtype == 2){
			  				$('.thistop').removeClass('thistop');
							var thml2 = '<ul><li><a href="#" data-id="'+id+'" class="thistop">'+name+'</a>'+html+'</li></ul>';
							$('.tree').empty();
							$('.tree').append(thml2);
			  			}
			  			if(addtype == 3){
			  				$('.data-this').text(name);
			  			}
			  			if(addtype == 4){
			  				if($('.data-this').parents('li').length == 0){
								$('.data-this').parents('li').parent('ul').remove();
							}else{
								$('.data-this').parent().remove();
							}
			  			}
			  			alert('编辑成功');
			  			OFFanimation();
			  			$('.data-this').removeClass('data-this');
			  			console.log(id, name, addtype);
			 		},
			 		fail: function (err) {
			   			alert(arr);
			  		}
				})
			})
	    }
	});
	$(document).click(function(){
		$('.wrap-ms-right').css({"display": "none"});
	})
//})

</script>
</body>
</html>
